<template>
  <div class="refund-page">
    <!-- 进度条 -->
    <div class="progress-bar">
      <div class="progress-container">
        <div class="progress-step active">1</div>
        <div class="progress-line active"></div>
        <span class="progress-text active">选座</span>
        <div class="progress-line active"></div>
        <div class="progress-step active">2</div>
        <div class="progress-line active"></div>
        <span class="progress-text active">支付</span>
        <div class="progress-line active"></div>
        <div class="progress-step active">3</div>
        <div class="progress-line"></div>
        <span class="progress-text active">退票</span>
      </div>
    </div>

    <div class="refund-container">
      <div class="refund-info-section">
        <h3>申请退票</h3>

        <div class="order-info">
          <div class="order-item">
            <span class="label">订单号：</span>
            <span class="value">{{ orderNumber }}</span>
          </div>
          <div class="order-item">
            <span class="label">电影名称：</span>
            <span class="value">{{ movieName }}</span>
          </div>
          <div class="order-item">
            <span class="label">退票金额：</span>
            <span class="value">¥{{ finalPrice }}</span>
          </div>
        </div>

        <div class="refund-note">
          <h4>退票说明</h4>
          <ul>
            <li>退票申请提交后，将在1-3个工作日内处理</li>
            <li>退款将原路返回您的支付账户</li>
            <li>若电影开场前2小时内申请退票，可能会产生手续费</li>
          </ul>
        </div>
      </div>

      <div class="refund-action-section">
        <div class="refund-confirm">
          <p class="price-confirm">
            确认退款金额：<span>¥{{ finalPrice }}</span>
          </p >
          <div class="button-group">
            <button @click="goBack" class="back-btn">取消</button>
            <button
              @click="handleSubmitRefund"
              class="refund-btn"
              :disabled="isProcessing"
            >
              {{ isProcessing ? "处理中..." : "确认退票" }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { useRouter, useRoute } from "vue-router";
// 导入统一的API函数（替换直接使用axios）
import { submitRefund } from "@/api/user";

const router = useRouter();
const route = useRoute();

// 订单信息
const orderId = ref(route.query.orderId || "");
const orderNumber = ref(route.query.orderNumber || "");
const movieName = ref(route.query.movieName || "未知电影");
const finalPrice = ref(route.query.finalPrice || 0);
const userId = ref(route.query.userId || "");

// 状态控制
const isProcessing = ref(false);

// 提交退票申请
const handleSubmitRefund = async () => {
  // 验证参数 - 增加对退款金额的验证
  if (!orderId.value || !finalPrice.value) {
    alert("订单信息不完整，无法提交退票申请");
    return;
  }

  if (!confirm("确定要申请退票吗？")) {
    return;
  }

  try {
    isProcessing.value = true;

    // 调用API，第二个参数改为退款金额（finalPrice）
    const response = await submitRefund(
      Number(orderId.value),
      Number(finalPrice.value) // 传递实际退款金额
    );
    console.log("退票结果", response.data);

    if (response.data.alipay_trade_refund_response.code === "10000") {
      alert("退票申请提交成功，我们将尽快处理");
      router.push("/myorder");
    } else if (response.data.alipay_trade_refund_response.code === "40004") {
      alert("订单已经退票"); // 修正提示信息，符合实际状态
      router.push("/myorder"); // 可以考虑跳回订单列表页
    } else {
      // 可以更精准地展示支付宝返回的错误信息
      const errorMsg =
        response.data.alipay_trade_refund_response.sub_msg ||
        response.data.message ||
        "退票申请提交失败，请重试";
      alert(errorMsg);
    }
  } catch (error) {
    console.error("退票请求失败", error);
    alert("网络错误，退票申请提交失败，请稍后重试");
  } finally {
    isProcessing.value = false;
  }
};
</script>

<style scoped>
.refund-page {
  padding: 20px;
  width: 1200px;
  margin: 0 auto;
  background-color: #f9f9f9;
  min-height: calc(100vh - 120px);
}

/* 进度条样式 */
.progress-bar {
  margin-bottom: 30px;
}

.progress-container {
  display: flex;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
}

.progress-step {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ddd;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.progress-step.active {
  background-color: #a2131d;
  color: white;
}

.progress-line {
  flex: 1;
  height: 2px;
  background-color: #ddd;
  margin: 0 10px;
}

.progress-line.active {
  background-color: #a2131d;
}

.progress-text {
  color: #999;
  font-size: 14px;
}

.progress-text.active {
  color: #a2131d;
  font-weight: bold;
}

.refund-container {
  display: flex;
  gap: 30px;
  margin-top: 20px;
}

.refund-info-section {
  flex: 1;
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.refund-info-section h3 {
  margin-bottom: 20px;
  color: #333;
  font-size: 18px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.order-info {
  margin-bottom: 30px;
}

.order-item {
  margin-bottom: 15px;
  font-size: 14px;
}

.order-item .label {
  color: #666;
  width: 100px;
  display: inline-block;
}

.order-item .value {
  color: #333;
  font-weight: 500;
}

.refund-note {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
}

.refund-note h4 {
  margin-top: 0;
  color: #a2131d;
  font-size: 16px;
  margin-bottom: 10px;
}

.refund-note ul {
  margin: 0;
  padding-left: 20px;
  color: #666;
  font-size: 14px;
}

.refund-note li {
  margin-bottom: 5px;
}

.refund-action-section {
  flex: 0 0 350px;
}

.refund-confirm {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.price-confirm {
  font-size: 16px;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.price-confirm span {
  color: #a2131d;
  font-weight: bold;
  font-size: 18px;
}

.button-group {
  display: flex;
  gap: 10px;
}

.back-btn {
  flex: 1;
  padding: 12px;
  background-color: #f8f9fa;
  color: #333;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.2s;
}

.back-btn:hover {
  background-color: #e9ecef;
}

.refund-btn {
  flex: 1;
  padding: 12px;
  background-color: #a2131d;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.refund-btn:hover:not(:disabled) {
  background-color: #8a1018;
}

.refund-btn:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

@media (max-width: 768px) {
  .refund-page {
    width: 100%;
    padding: 10px;
  }

  .refund-container {
    flex-direction: column;
  }

  .refund-action-section {
    flex: none;
    width: 100%;
  }
}
</style>